import QtQuick 2.0

Item {
    width: parent.width
    height: parent.height

    property var m_picturePath: ""

    property var m_picWidth: 140
    property var m_picHeight: m_picWidth

    Canvas
    {
        id: canvas
        anchors.fill: parent

        onPaint:
        {
            var ctx = canvas.getContext("2d");
            ctx.reset();
            toRoundBitmap(ctx);
        }

        Component.onCompleted:
        {
            loadImage(m_picturePath)
        }

        onImageLoaded:
        {
            requestPaint();
        }

        function toRoundBitmap(ctx)
        {
            var min_size = Math.min(parent.width,parent.height);

            var x = parent.width/2;
            var y = parent.height/2
            var r = min_size/2 - 20;
            circleImage(ctx,x - r,y - r,r);

            drawWhiteBorder(ctx,x,y,r);
        }

        function circleImage(ctx,x,y,r)
        {
            ctx.save();
            var d = 2 * r;
            var cx = x + r;
            var cy = y + r;
            ctx.arc(cx, cy, r, 0, 2 * Math.PI,true);
            ctx.clip();
            ctx.drawImage(m_picturePath, x, y, d, d);
            ctx.restore();
        }

        function drawWhiteBorder(ctx,x,y,r)
        {
            ctx.strokeStyle = "#FFFFFF"
            ctx.lineWidth = 4;
            ctx.arc( x,y,r,0,Math.PI*2);
            ctx.stroke();
        }
    }
}
